/*
    学习目标：useRef的使用
  ref作用：3. 保存数据 1. 获取DOM  2 获取组件实例对象
  🔔useRef的作用和React.createRef完全相同：创建ref
*/
// 1. 先导入useEffect
import React, { useEffect, useRef, useState } from 'react'

export default function App() {
    // 准备组件的显示与隐藏
    const [isShow, setIsShow] = useState(true)
    
  return (
    <div>
       {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  )
}

function Child(){
  // 1 创建ref
    const timerRef = useRef()
    console.log('timerRef  ----->  ', timerRef);
    // 需求1：挂载时，开启定时器
    useEffect(() => {
      // 2使用ref保存数据
      timerRef.current=setInterval(()=>{
        console.log('定时器开启了  ----->  ', 123);
      },100)
    }, [])
    

    // 2. 需求2：卸载时，挂载
    useEffect(() => {
      return ()=>{
        // 3卸载
        clearInterval(timerRef.current)
        console.log('timerRef  ----->  ', timerRef);
      }
    }, [])
    
    
    return <div>我是子组件</div>;
}
